<template>
  <div class="payCont">
    <el-dialog
      v-model="dialogVisible"
      width="40%"
      class="diagFlag"
      :rules="rules"
    >
      <div class="title">订单支付</div>
      <div class="tips">请仔细核对您要支付的订单</div>
      <el-divider></el-divider>
      <div class="cont">
        <div class="info">
          <div>{{payData.scriptWritingTitle}}</div>
          <div>
            应付金额：
            <span>￥{{payData.price}}</span>
          </div>
        </div>
        <div class="payCode">
          <div class="wechat">
            <div class="imgCont">
              <img :src="require('@/assets/img/code.png')" alt="" />
            </div>
            <div class="bot">
              <img :src="require('@/assets/img/wechat.png')" alt="" />
              <span>微信支付</span>
            </div>
          </div>
          <div class="payChat">
            <div class="imgCont">
              <img :src="require('@/assets/img/code.png')" alt="" />
            </div>
            <div class="bot">
              <img :src="require('@/assets/img/pay.png')" alt="" />
              <span>支付宝支付</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
    props:{
        payData:{
            default:{},
            type:Object
        }
    },
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>
<style lang="scss" scoped>
.payCont {
  overflow: hidden;
  ::v-deep {
    .el-dialog__body {
      padding: 0;
    }
    .el-button--loginBtn {
      background: #e5e5e5;
      &:hover {
        color: #a0a0a0;
        border-color: #e5e5e5;
      }
    }
    .el-button--submit {
      background: #2eb0c6;
    }
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #111111;
    text-align: center;
  }
  .tips {
    color: #999999;
    font-size: 12px;
    text-align: center;
  }
  .cont {
    width: 470px;
    margin: 0 auto;
    overflow: hidden;
    .info {
      display: flex;
      justify-content: space-between;
    }
    .payCode {
      border: 1px solid #cccccc;
      display: flex;
      justify-content: center;
      margin: 30px 0 90px;
      & > div {
        width: 120px;
        margin: 40px 0;
        &.wechat {
          margin-right: 80px;
          .imgCont {
            border: 1px solid #50b674;
          }
        }
        &.payChat {
          .imgCont {
            border: 1px solid #06b4fd;
          }
        }
        .imgCont {
          height: 120px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 89px;
            height: 86px;
          }
        }
        .bot {
          margin-top: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-weight: 400;
          color: #333333;
          img {
            width: 28px;
            height: 28px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>